<!DOCTYPE html>
<html lang="en">

<head>
  <title>订单详情</title>
  <link rel="stylesheet" href="/css/total/check.css">
  <% include ../component/_common_tongji.html %>
    <% include ../component/common_meta.html %>
</head>

<body>
  <div id="app">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div class="content" v-cloak>
      <div class="top">
        <img :src="titleImg" alt="">
        <p class="title">{{title}}</p>
        <p class="num">数量{{exam_count}}</p>
        <p class="price">价格：
          <span>¥{{price}}</span>
        </p>
        <span class="share-money" @click="handleShareMoney">
          <img src="/img/money.png" alt="">
          分享领取助学金</span>
      </div>
      <div class="line"></div>
      <div class="order">
        <ul>
          <li class="order_number">订单编号：
            <span id="order_number">{{order_id}}</span>
            <button class="copy order_btn" @click="handleOrderCopy" id="id_copy" data-clipboard-action="copy" data-clipboard-target="#order_number">复制</button>
          </li>
          <li>支付时间：
            <span>{{create_time}}</span>
          </li>
          <li>支付方式：
            <span>{{pay_type}}支付</span>
          </li>
        </ul>
      </div>
      <div class="redeem_code" v-if="type != 2">
        兑换码：
        <span id="redeem_code">{{ex_code}}</span>
        <button class="copy redeem_btn" @click="handleRedeemCopy" id="id_copy" data-clipboard-action="copy" data-clipboard-target="#redeem_code">复制</button>
      </div>
      <div class="address" v-if="type == 2">
        <div class="express_code">
          <div class="express">
            <p class="express_p">配送方式：
              <span>顺丰</span>
            </p>
            <div>快递单号：
              <span id="express_code">{{express_no}}</span>
              <button class="copy express_btn" @click="handleExpressCopy" id="id_copy" data-clipboard-action="copy" data-clipboard-target="#express_code">复制</button>
            </div>
          </div>
        </div>
        <div class="address_right">
          <p>{{realname}}&nbsp;{{phone}}</p>
          <span>{{address}}</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="goods_prece">
        <p>
          <span class="payInfoLeft">商品价格</span>
          <span class="payInfoRight">￥{{original_price}}</span>
        </p>
        <p>
          <span class="payInfoLeft">运费</span>
          <span class="payInfoRight">+￥0</span>
        </p>
        <p style="border-bottom: 0.02rem solid #EBEBEB;">
          <span class="payInfoLeft">优惠</span>
          <span class="payInfoRight">-￥{{money}}</span>
        </p>
        <p class="payInfoRight payMent">实付款：
          <span>￥{{price}}</span>
        </p>
      </div>
      <footer>
        <button class="home" @click="handleGoHome" v-if="home">返回首页</button>
        <button @click="handleAddQun" class="footer_btn">加入VIP群</button>
      </footer>
      <div class="shareLink" v-if="is_shareLink" @click="handleFailImg">
        <img :src="shareLink" alt="">
        <p>
            长按保存图片，发给好友或分享朋友圈，<br>
            每邀请1位好友购买课程，您将立即获得<span>{{shareMoney}}</span>元的助学金
        </p>
      </div>
    </div>
  </div>
  <% include ../component/common_js.html %>
    <script src="https://sfile.tl100.com/js/libs/moment.min.js"></script>
    <script src="https://sfile.tl100.com/js/libs/clipboard.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          my_invitation_code: '',
          titleImg: '',
          title: '',
          exam_count: '',
          shareLink: '/img/loading.png',
          order_id: '',
          price: '',
          original_price: '',
          userInfo: {},
          ex_code: '',
          realname: '',
          phone: '',
          pay_type: '',
          create_time: '',
          money: '',
          express_no: '',  // 快递单号
          is_shareLink: false,
          address: '',
          type: '',
          exam_id: '',
          sale_id: '',
          shareMoney: '',
          loading: false,
          home: false,
          mode: false
        },
        mounted: function () {
          <% if( origin != '') {%>
            this.home = true;
            document.querySelector('.footer_btn').style.width = '3.5rem';
          <%}%>
          if (localStorage.getItem('token') && localStorage.getItem('token') != '') {
            this.getUserOrder()
          } else {
            location.href = '/tlmall/login?' + window.location.href;
          }
        },
        methods: {
          getUserOrder() {
            var vm = this;
            api.post('/api/v2/order/getOrderDetail', {
              token: localStorage.getItem('token'),
              order_id: "<%= order_id%>"
            }).then(res => {
              if (res.data.res_code == 1) {
                var res_data = res.data.data;
                if (res_data.state <= 0) {
                  location.replace('/tlmall/intro?exam_id='+res_data.exam_id+'&sale_id='+res_data.exam_sale_id+'&o=detail');
                  return;
                }
                vm.my_invitation_code = res_data.invitation_code;
                vm.title = res_data.exam_name;
                vm.titleImg = res_data.img_url == '' ? '/img/tl.jpg' : res_data.img_url;
                vm.exam_count = res_data.exam_count;
                vm.original_price = res_data.order_price + res_data.save_money;
                vm.price = res_data.order_price;
                vm.phone = res_data.phone;
                vm.type = res_data.type;
                vm.ex_code = res_data.ex_code;
                vm.realname = res_data.realname;
                vm.order_id = res_data.order_id;
                vm.money = res_data.save_money;
                vm.exam_id = res_data.exam_id;
                vm.sale_id = res_data.exam_sale_id;
                vm.create_time = moment(res_data.create_time).format('YYYY-MM-DD HH:mm');
                if (res_data.pay_type == 1) {
                  vm.pay_type = '微信'
                } else if (res_data.pay_type == 2) {
                  vm.pay_type = '支付宝'
                } else if (res_data.pay_type == 3) {
                  vm.pay_type = 'qq'
                }
                vm.address = res_data.receiving_info ? res_data.receiving_info.address : '';
                vm.express_no = res_data.receiving_info ? res_data.receiving_info.express_no : '';
                // 如果在微信中，微信分享
                <%if (pt =='wechat') {%>
                  wxObj({
                    shareUrl: "https://m.tl100.com/tlmall/intro?o=share&exam_id="+res_data.exam_id+"&sale_id="+res_data.exam_sale_id+"&invitation_code=" + res_data.invitation_code,
                    title: res_data.share_title,
                    desc: res_data.share_desc,
                    link: '&',
                    imgUrl: res_data.share_img_url
                  });
                <%} else {%>
                  // 在其他情况下设置meta标签
                  document.querySelector('meta[itemprop="name"]').setAttribute('content', res_data.share_title)
                  document.querySelector('meta[itemprop="image"]').setAttribute('content', res_data.share_img_url)
                  document.querySelector('meta[name="description"]').setAttribute('content', res_data.share_desc)
                <%}%>
              } else if (res.data.res_code <= -900) {
                localStorage.removeItem('token');
                window.location.href = '/tlmall/login?' + window.location.href;
              }
            }).catch(err => {
              setLog('/api/v2/order/getOrderDetail:catch', JSON.stringify(err));
            })
          },
          handleOrderCopy() {
            var vm = this;
            var clipboard = new ClipboardJS('.order_btn');
            clipboard.on("success", function (e) {
              vm.btn = false;
              alert('复制成功');
              console.info("复制成功，复制内容：    " + e.text);
              clipboard.destroy()
            });
            clipboard.on("error", function (e) {
              vm.btn = false;
              console.info(e);
              clipboard.destroy()
            })
          },
          handleRedeemCopy() {
            var vm = this;
            var clipboard = new ClipboardJS('.redeem_btn');
            clipboard.on("success", function (e) {
              vm.btn = false;
              alert('复制成功');
              console.info("复制成功，复制内容：    " + e.text);
              clipboard.destroy()
            });
            clipboard.on("error", function (e) {
              vm.btn = false;
              console.info(e);
              clipboard.destroy()
            })
          },
          handleExpressCopy() {
            var vm = this;
            var clipboard = new ClipboardJS('.express_btn');
            clipboard.on("success", function (e) {
              vm.btn = false;
              alert('复制成功');
              console.info("复制成功，复制内容：    " + e.text);
              clipboard.destroy()
            });
            clipboard.on("error", function (e) {
              vm.btn = false;
              console.info(e);
              clipboard.destroy()
            })
          },
          handleShareMoney() {
            this.loading = true;
            this.is_shareLink = true;
            var vm = this;
            api.post('/api/v2/order/getShareImage', {
              order_id: "<%= order_id %>",
              token: localStorage.getItem('token')
            }).then(res => {
              if (res.data.res_code == 1) {
                vm.shareLink = res.data.data.img_url;
                vm.loading = false;
              }
            }).catch(err => {
              setLog('/api/v2/order/getShareImage:catch', JSON.stringify(err));
            })
          },
          handleAddQun () {
            // 加群
            var vm = this;
            api.post('/api/v2/order/getExamLink', {
              order_id: "<%= order_id %>",
              token: localStorage.getItem('token')
            }).then(res => {
              if (res.data.res_code == 1) {
                location.href = res.data.data.url;
              }
            }).catch(err => {
              setLog('/api/v2/order/getExamLink:catch', JSON.stringify(err));
            })
          },
          handleGoHome () {
            window.location.href = '/tlmall/intro?o=detail&exam_id='+this.exam_id+'&sale_id='+this.sale_id;
          },
          handleFailImg () {
            this.is_shareLink = false;
          }
        }
      })


    </script>
</body>

</html>